<!DOCTYPE html>
<html lang="en">

<!--<head>-->
<!--    <meta charset="utf-8" />-->
<!--    <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">-->
<!--    <link rel="icon" type="image/png" href="./assets/img/favicon.ico">-->
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />-->
<!--    <title>Superlattice DataBase</title>-->
<!--    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />-->
<!--    &lt;!&ndash; Google Font &ndash;&gt;-->
<!--    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Source+Sans+Pro:400,600,700" rel="stylesheet">-->
<!--    &lt;!&ndash; Font Awesome Icons &ndash;&gt;-->
<!--    <link href="css/fore/style.css" rel="stylesheet">-->

<!--    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">-->
<!--</head>-->

<body class="bg-lightblue">
<div class="loginErrorMessageDiv">
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
        <span class="errorMessage">22</span>
    </div>
</div>
    <div class="container" style="margin-top: 4rem;">
        <div class="border bg-white p-5">

            <div class="row justify-content-between">

                <div class="col-md-5 mb-2 mb-md-0">
                    <h3 class="navbar-brand" style="margin-left: -.1333rem;"> <strong>Superlattice DataBase</strong> </h3>
                    <h5 style="margin-top: 35px;">
                        Become a member! <br> We'll never share your email with anyone else.
                    </h5>
                </div>
                <div class="col-md-7" style="margin-top: 30px;">
                    <form>

                        <div class="form-group">
                            <h5>Email:</h5>
                            <input v-model="user.name" type="text" class="form-control" id="exampleInputEmail1"  placeholder="手机/会员名/邮箱" required="">
                        </div>
                        <div class="form-group">
                            <h5>Password:</h5>
                            <input v-model="user.password" type="password" class="form-control" id="exampleInputPassword1" placeholder="" required="">
                        </div>
                        <div class="form-group">
                            <a href="register" class="form-text text-danger float-right" style="font-size:larger">Register</a>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary w-50 btn-round" @click="login">Login</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>

    </div>



    <!--------------------------------------JAVASCRIPTS--------------------------------------->
<!--    <script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>-->
<!--    <script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>-->
<!--    <script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>-->
<!--    <script src="./assets/js/functions.js" type="text/javascript"></script>-->
    <script>
        $(function () {
            var data4Vue = {
                uri: 'forelogin',
                result: [],
                user: {name: '', password: ''}
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted: function () {
                    linkDefaultActions();
                },
                methods: {
                    login: function () {
                        var url = this.uri;
                        if (0 == this.user.name.length) {
                            $("span.errorMessage").html("请输入用户名");
                            $("div.loginErrorMessageDiv").css("visibility", "visible");
                            return;
                        }
                        if (0 == this.user.password.length) {
                            $("span.errorMessage").html("请输入密码");
                            $("div.loginErrorMessageDiv").css("visibility", "visible");
                            return;
                        }
                        axios.post(url, this.user).then(function (response) {
                            var result = response.data;
                            if (result.code == 0) {
                                location.href = "home";
                            } else {
                                console.log(result.message);
                                $("span.errorMessage").html(result.message);
                                $("div.loginErrorMessageDiv").css("visibility", "visible");
                            }
                        });
                    }
                }
            });
            // var left = window.innerWidth / 2 + 162;
            // $("div.loginSmallDiv").css("left", left);
        })
    </script>
</body>

</html>